<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Insert title here</title>
</head>
<body>
<h1>添加选题</h1>
<%--<form enctype="multipart/form-data" method="post">--%>
<%--    <br>--%>
<%--    <br>--%>
<%--    <label>类型:</label>--%>
<%--    <input type="text" id="type" >--%>
<%--    <br>--%>
<%--    <label>题目:</label>--%>
<%--    <input type="text" id="name">--%>
<%--    <br>--%>
<%--    <label>相关文档:</label>--%>
<%--    <div class="layui-upload">--%>
<%--        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>--%>
<%--        <div class="layui-upload-list" style="max-width: 1000px;">--%>
<%--            <table class="layui-table">--%>
<%--                <colgroup>--%>
<%--                    <col>--%>
<%--                    <col width="150">--%>
<%--                    <col width="260">--%>
<%--                    <col width="150">--%>
<%--                </colgroup>--%>
<%--                <thead>--%>
<%--                <tr><th>文件名</th>--%>
<%--                    <th>大小</th>--%>
<%--                    <th>上传进度</th>--%>
<%--                    <th>操作</th>--%>
<%--                </tr></thead>--%>
<%--                <tbody id="demoList"></tbody>--%>
<%--            </table>--%>
<%--        </div>--%>
<%--        <button type="button" class="layui-btn" id="testListAction">开始上传</button>--%>
<%--    </div>--%>
<%--</form>--%>


<%--<script type="text/javascript">--%>
<%--    layui.use('upload', function(){--%>
<%--        var $ = layui.jquery--%>
<%--            ,upload = layui.upload;--%>
<%--        //调整三个变量位置到都“上传成功”后，文件在数据库的名字和类型才能识别到--%>
<%--        //  var teacherId=$('#teacherId').val();--%>
<%--        // var type=$('#type').val();--%>
<%--        // var name=$("#name").val();--%>
<%--//演示多文件列表--%>
<%--        var demoListView = $('#demoList')--%>
<%--            ,uploadListIns = upload.render({--%>
<%--            elem: '#testList'--%>
<%--            ,url: '${pageContext.request.contextPath}/UploadServlet' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。--%>
<%--            ,accept: 'file'--%>
<%--            // ,multiple: true--%>
<%--            ,auto: false--%>
<%--            ,exts: 'zip|rar|7z' //只允许上传压缩文件--%>
<%--            ,bindAction: '#testListAction'--%>
<%--            ,choose: function(obj){--%>
<%--                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列--%>
<%--                //读取本地文件--%>
<%--                obj.preview(function(index, file, result){--%>
<%--                    var tr = $(['<tr id="upload-'+ index +'">'--%>
<%--                        ,'<td>'+ file.name +'</td>'--%>
<%--                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'--%>
<%--                        ,'<td>等待上传</td>'--%>
<%--                        ,'<td>'--%>
<%--                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'--%>
<%--                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'--%>
<%--                        ,'</td>'--%>
<%--                        ,'</tr>'].join(''));--%>

<%--                    //单个重传--%>
<%--                    tr.find('.demo-reload').on('click', function(){--%>
<%--                        obj.upload(index, file);--%>
<%--                    });--%>

<%--                    //删除--%>
<%--                    tr.find('.demo-delete').on('click', function(){--%>
<%--                        delete files[index]; //删除对应的文件--%>
<%--                        tr.remove();--%>
<%--                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选--%>
<%--                    });--%>

<%--                    demoListView.append(tr);--%>
<%--                });--%>
<%--            }--%>
<%--            ,done: function(res, index, upload){--%>
<%--                console.log(res);--%>
<%--                console.log(index);--%>
<%--                console.log(upload);--%>
<%--                //成功的回调--%>
<%--                if(res){ //上传成功--%>
<%--                    p=res.src2;--%>
<%--                    console.log("p="+p);--%>
<%--                    var tr = demoListView.find('tr#upload-'+ index)--%>
<%--                        ,tds = tr.children();--%>
<%--                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');--%>
<%--                    tds.eq(3).html(''); //清空操作--%>
<%--                    return  delete this.files[index]; //删除文件队列已经上传成功的文件--%>

<%--                }--%>

<%--                this.error(index, upload);--%>
<%--            }--%>
<%--            ,error: function(index, upload){ //错误回调--%>
<%--                var tr = demoListView.find('tr#upload-'+ index)--%>
<%--                    ,tds = tr.children();--%>
<%--                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');--%>
<%--                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传--%>

<%--            }--%>
<%--        });--%>
<%--    }) //如果少了该"})"",那么逻辑 会出错，点击文件上传会没有反应--%>
<%--</script>--%>



<div class="layui-inline" style="width: 235px;">
    <input name="" placeholder="选择职位" class="layui-input" id="demo2">
</div>

<script>
    layui.use(['dropdown', 'util', 'layer', 'table'], function(){
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery;

        //高级演示 - 各种组合
        dropdown.render({
            elem: '#demo2'
            ,isSpreadItem: false
            ,data: [
                {
                    title: '技术'
                    ,id: 1
                    ,type: 'group'
                    ,child:
                    [{title: '后端开发',id: 11
                            ,child: [{
                                title: 'java后端开发'
                                ,id: 111
                            },{
                                title: 'c++后端开发'
                                ,id: 112
                            },{
                                title: 'c#后端开发'
                                ,id: 113
                            },{
                                title: 'Node.js后端开发'
                                ,id: 114
                            },{
                                title: '数据采集'
                                ,id: 115
                            },{
                                title: '全栈工程师'
                                ,id: 116
                            },{
                                title: '后端开发'
                                ,id: 117
                            }]
                    }
                    ,{title: '移动开发',id: 12
                        ,child: [{
                            title: 'Android开发'
                            ,id: 121
                        },{
                            title: 'Ios开发'
                            ,id: 122
                        },{
                            title: 'U3d'
                            ,id: 123
                        },{
                            title: 'cocos'
                            ,id: 124
                        }]
                    }
                    ,{title: '测试',id: 13
                        ,child: [{
                            title: '测试工程师'
                            ,id: 131
                        },{
                            title: '自动化测试'
                            ,id: 132
                        },{
                            title: '软件测试'
                            ,id: 133
                        },{
                            title: '硬件测试'
                            ,id: 134
                        }]
                    }
                    ,{title: '运维/技术支持',id: 14
                        ,child: [{
                            title: '运维工程师'
                            ,id: 141
                        },{
                            title: '系统工程师'
                            ,id: 142
                        },{
                            title: '网络安全'
                            ,id: 143
                        },{
                            title: 'DBA'
                            ,id: 144
                        }]
                    }
                    ]
                }
                ,{
                    title: '产品'
                    ,id: 2
                    ,type: 'group'
                    ,child:
                        [{title: '产品经理',id: 21
                            ,child: [{
                                title: 'AI产品经理'
                                ,id: 211
                            },{
                                title: '化妆品产品经理'
                                ,id: 212
                            },{
                                title: '电商产品经理'
                                ,id: 213
                            },{
                                title: '产品专员'
                                ,id: 214
                            },{
                                title: '数据产品经理'
                                ,id: 215
                            },{
                                title: '游戏策划'
                                ,id: 216
                            },{
                                title: '硬件产品经理'
                                ,id: 217
                            }]
                        }
                        ,{title: '高端产品职位',id: 22
                            ,child: [{
                                title: '高级产品管理岗位'
                                ,id: 221
                            },{
                                title: '游戏制作人'
                                ,id: 222
                            }]
                        }
                        ]
                }
                ,{
                    title: '设计'
                    ,id: 3
                    ,type: 'group'
                    ,child:
                        [{title: '视觉/交互设计',id: 31
                            ,child: [{
                                title: '视觉设计师'
                                ,id: 311
                            },{
                                title: '网页设计师'
                                ,id: 312
                            },{
                                title: 'Ui设计师'
                                ,id: 313
                            },{
                                title: '平面设计'
                                ,id: 314
                            },{
                                title: '3d设计师'
                                ,id: 315
                            },{
                                title: '设计师'
                                ,id: 316
                            }]
                        }
                        ,{title: '游戏设计',id: 32
                            ,child: [{
                                title: '系统策划'
                                ,id: 321
                            },{
                                title: '游戏角色'
                                ,id: 322
                            },{
                                title: '游戏动作'
                                ,id: 323
                            },{
                                title: '游戏场景'
                                ,id: 324
                            }]
                        }

                        ]
                }
                ,{
                    title: '运营/编辑'
                    ,id: 4
                    ,type: 'group'
                    ,child:
                        [{title: '运营',id: 41
                            ,child: [{
                                title: '淘宝运营'
                                ,id: 411
                            },{
                                title: '产品运营'
                                ,id: 412
                            },{
                                title: '商家运营'
                                ,id: 413
                            },{
                                title: '网站运营'
                                ,id: 414
                            }]
                        }
                        ,{title: '编辑',id: 42
                            ,child: [{
                                title: '主编、副主编'
                                ,id: 421
                            },{
                                title: '文案编辑'
                                ,id: 422
                            },{
                                title: '网站编辑'
                                ,id: 423
                            }]
                        }
                        ]
                }
                ,{
                    title: '销售'
                    ,id: 5
                    ,type: 'group'
                    ,child:
                        [{title: '销售行政/商务',id: 51
                            ,child: [{
                                title: '商务专员'
                                ,id: 511
                            },{
                                title: '商务经理'
                                ,id: 512
                            },{
                                title: '销售助理'
                                ,id: 513
                            },{
                                title: '销售运营'
                                ,id: 514
                            }]
                        }
                        ,{title: '服务业销售',id: 52
                            ,child: [{
                                title: '服装导购'
                                ,id: 521
                            },{
                                title: '化妆品导购'
                                ,id: 522
                            },{
                                title: '珠宝销售'
                                ,id: 523
                            },{
                                title: '旅游顾问'
                                ,id: 524
                            }]
                        }
                        ,{title: '汽车销售',id: 53
                            ,child: [{
                                title: '汽车销售'
                                ,id: 531
                            },{
                                title: '汽车配件销售'
                                ,id: 532
                            }]
                        }
                        ,{title: '广告销售',id: 54
                            ,child: [{
                                title: '广告销售'
                                ,id: 541
                            },{
                                title: '会议活动销售'
                                ,id: 542
                            },{
                                title: '会展活动销售'
                                ,id: 543
                            }]
                        }
                        ]
                }
                ,{
                    title: '采购/贸易'
                    ,id: 6
                    ,type: 'group'
                    ,child:
                        [{title: '进出口贸易',id: 61
                            ,child: [{
                                title: '贸易跟单'
                                ,id: 611
                            },{
                                title: '报关/报检员'
                                ,id: 612
                            },{
                                title: '单证员'
                                ,id: 613
                            }]
                        }
                        ,{title: '采购',id: 62
                                ,child: [{
                                    title: '招标专员'
                                    ,id: 621
                                },{
                                    title: '投标专员'
                                    ,id: 622
                                },{
                                    title: '商品专员/助理'
                                    ,id: 623
                                },{
                                    title: '采购专员/助理'
                                    ,id: 624
                                },{
                                    title: '采购工程师'
                                    ,id: 625
                                }]
                            }]
                }
            ]
            ,click: function(obj){
                this.elem.val(obj.title);
                console.log(obj.title);
            }
            ,style: 'width: 235px;'
        });

    });
</script>

</body>
</html>